<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CharmFlyoutLibrary">
    <Style
        x:Key="BackButtonStyle"
        TargetType="Button">
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid
                        Width="50"
                        Height="50">
                        <TextBlock
                            Text="&#xE0A7;"
                            FontFamily="Segoe UI Symbol"
                            FontSize="41"
                            Margin="8,-5,-8,5" />
                        <TextBlock
                            Text="&#xE112;"
                            FontFamily="Segoe UI Symbol"
                            FontSize="16"
                            Margin="16,14,-16,-14" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style
        TargetType="local:CharmFlyout">
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="local:CharmFlyout">
                    <Popup
                        Width="{TemplateBinding FlyoutWidth}"
                        Height="{TemplateBinding FlyoutHeight}"
                        IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOpen, Mode=TwoWay}"
                        IsLightDismissEnabled="True"
                        HorizontalAlignment="Right">
                        <Border
                            Width="{TemplateBinding FlyoutWidth}"
                            Height="{TemplateBinding FlyoutHeight}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition
                                        Height="80" />
                                    <RowDefinition
                                        Height="*" />
                                </Grid.RowDefinitions>
                                <Border
                                    Background="{TemplateBinding HeadingBackgroundBrush}">
                                    <Grid
                                        Margin="29,19,5,0">
                                        <Grid.Transitions>
                                            <TransitionCollection>
                                                <EntranceThemeTransition />
                                            </TransitionCollection>
                                        </Grid.Transitions>
                                        <ContentPresenter
                                            Margin="0,0,10,0"
                                            Content="{TemplateBinding Logo}"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Right" />
                                        <StackPanel
                                            Orientation="Horizontal">
                                            <Button
                                                Command="{TemplateBinding BackCommand}"
                                                Style="{StaticResource BackButtonStyle}"
                                                Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                            <TextBlock
                                                Margin="0,10,0,5"
                                                Text="{TemplateBinding Heading}"
                                                VerticalAlignment="Top"
                                                FontFamily="Segoe UI"
                                                FontSize="28"
                                                FontWeight="Thin"
                                                LineHeight="30"
                                                Foreground="{TemplateBinding HeadingForegroundBrush}" />
                                        </StackPanel>
                                    </Grid>
                                </Border>
                                <Grid
                                    Grid.Row="1"
                                    Background="{TemplateBinding ContentBackgroundBrush}">
                                    <Rectangle
                                        Fill="{TemplateBinding ContentForegroundBrush}"
                                        Width="1"
                                        HorizontalAlignment="Left" />
                                    <Border
                                        Margin="{TemplateBinding ContentPadding}">
                                        <ContentPresenter
                                            Foreground="{TemplateBinding ContentForegroundBrush}">
                                            <ContentPresenter.Transitions>
                                                <TransitionCollection>
                                                    <EntranceThemeTransition />
                                                </TransitionCollection>
                                            </ContentPresenter.Transitions>
                                        </ContentPresenter>
                                    </Border>
                                </Grid>
                            </Grid>
                        </Border>
                    </Popup>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style
        TargetType="local:CharmFrame">
        <Setter
            Property="HorizontalContentAlignment"
            Value="Stretch" />
        <Setter
            Property="IsTabStop"
            Value="False" />
        <Setter
            Property="VerticalContentAlignment"
            Value="Stretch" />
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="local:CharmFrame">
                    <Grid>
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ContentPresenter
                            Content="{TemplateBinding CharmContent}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
